<template>
  <view class="content">
    <view class="u-nav-slot" slot="left" @click="left">
      <u-icon name="arrow-left" color="#8a8a8a" size="42" :bold="true"></u-icon>
    </view>
    <view class="content_top">
      <view class="serch">
        <u-input
          v-model="serch"
          prefixIcon="search"
          prefixIconStyle="font-size: 20px; color: #909399;"
          placeholder=""
          border="none"
          inputAlign="left"
          confirm-type="search"
          @confirm="doSearch"
        ></u-input>
      </view>
      <view class="guanzhu" @click="guanzhu">
        <img
          src="../../static/img/我的关注.png"
          alt=""
          style="width: 50rpx; height: 50rpx; display: block; margin: 0 auto"
        />
        <view class="guanzhufont">我的关注</view>
      </view>
    </view>
    <view class="text-area">
      <view
        class="imageBox"
        v-for="(item, index) in list"
        :key="index"
        @click="imageClick"
      >
        <image :src="item.cover" style="width: 100%; height: 100%"></image>
      </view>
      <u-divider text="敬请期待" textSize="18"></u-divider>
    </view>
    <view class="plus" @click="add"></view>
  </view>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { getActList } from "@/api/swiper";
const list = ref();
const serch = ref();
//搜索框
const doSearch = () => {};
//发布活动
const add = () => {
  uni.navigateTo({
    url: "/pages/swiper/addAct",
  });
};
// 获取列表数据
const queryList = async () => {
  const { data, code } = await getActList({ pageSize: "10", pageNum: "1" });
  if (code !== 200) return;
  list.value = data.records;
  list.value.map((item: { cover: string }) => {
    item.cover = "https://hunlianjiaxiao.cn/img/love/" + item.cover;
  });
};
// 点击图片跳转
const imageClick = () => {
  uni.navigateTo({
    url:
      `/pages/swiper/detail?data=` +
      encodeURIComponent(JSON.stringify(list.value)),
  });
};
// 关注
const guanzhu = () => {
  uni.navigateTo({
    url: `/pages/swiper/guanzhu`,
  });
};
// 返回上一页
const left = () => {
  uni.navigateBack();
};
onShow(() => {
  queryList();
});
</script>
<style>
.u-input__content {
  margin-top: 8rpx;
  padding: 0 20rpx;
}
</style>
<style lang="scss">
.content {
}

.u-nav-slot {
  position: absolute;
  top: 115rpx;
  left: 30rpx;
  z-index: 100;
}

.text-area {
  background-color: rgb(245, 245, 245);

  .imageBox {
    margin: 30rpx auto;
    height: 200rpx;
    width: 700rpx;
    overflow: hidden;
    border-radius: 20rpx;
  }
}

.content_top {
  background-image: linear-gradient(to bottom, #eb97b0, #faf5f6);
  height: 100rpx;
  padding-top: 180rpx;
  display: flex;

  .serch {
    width: 600rpx;
    height: 65rpx;
    background: rgba(94, 115, 167, 0.07);
    opacity: 1;
    border: 2rpx solid #d1deff;
    margin: 0 auto;
    border-radius: 30rpx;
  }
}

.guanzhu {
  margin-right: 20rpx;

  .guanzhufont {
    font-size: 12px;
  }
}

.plus {
  position: fixed;
  right: 20rpx;
  bottom: 20rpx;
  width: 80rpx;
  height: 80rpx;
  z-index: 2;
  /* 设置圆角 */
  border-radius: 50%;
  /* 设置边框及颜色 */
  /* 设置背景底色 */
  background-color: #eb97b0;
}

.plus::before {
  content: "";
  /* 使用绝对定位*/
  position: absolute;
  /* 通过left、top设置居中 */
  left: 50%;
  top: 80rpx;
  /* 左右长度 */
  width: 40rpx;
  margin-left: -20rpx;
  margin-top: -43rpx;
  /* 横线厚度 */
  border-top: 7rpx solid;
  /* 颜色 */
  color: #fff;
}

.plus::after {
  content: "";
  /* 使用绝对定位*/
  position: absolute;
  /* 通过left、top设置居中 */
  left: 80rpx;
  top: 50%;
  /* 竖线高度 */
  height: 40rpx;
  margin-left: -43rpx;
  margin-top: -20rpx;
  /* 横线厚度 */
  border-left: 7rpx solid;
  /* 颜色 */
  color: #fff;
}
</style>
